<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<title>Basic usage</title>
	<script src="/x-lab/kendou/js/jquery.min.js"></script>
	<script src="/x-lab/kendou/js/kendo.web.min.js"></script>
	<link href="/x-lab/kendou/styles/kendo.common.min.css" rel="stylesheet" />
	<link href="/x-lab/kendou/styles/kendo.default.min.css" rel="stylesheet" />
</head>
<body>
	<script src="/x-lab/kendou/content/shared/js/people.js"></script>
	<div id="example" class="k-content">
		<div id="clientsDb">
			<div id="grid"></div>
		</div>
		<style scoped>
			#clientsDb {
				width: 692px;
				height: 393px;
				margin: 30px auto;
				padding: 51px 4px 0 4px;
				background: url('/x-lab/kendou/content/web/grid/clientsDb.png') no-repeat 0 0;
			}
		</style>
		<script>
			$(document).ready(function() {
				$("#grid").kendoGrid({
					dataSource : {
						data : createRandomData(50),
						pageSize : 10
					},
					height : 360,
					groupable : true,
					scrollable : true,
					sortable : true,
					pageable : true,
					columns : [
						{
							field : "FirstName",
							width : 90,
							title : "First Name"
						},
						{
							field : "LastName",
							width : 90,
							title : "Last Name"
						},
						{
							width : 100,
							field : "City"
						},
						{
							field : "Title"
						},
						{
							field : "BirthDate",
							title : "Birth Date",
							template : '#= kendo.toString(BirthDate,"dd MMMM yyyy") #'
						}, {
							width : 50,
							field : "Age"
						} 
					]
				});
			});
		</script>
	</div>
</body>
</html>
